<template>
	<div class="header">
		<div class="logo">路由管理平台</div>
		<div class="user-info">
			<el-dropdown trigger="click" @command="handleCommand">
				<span class="el-dropdown-link">
            <img class="user-logo" src="../../../static/img/img.jpg">
            {{username}}
        </span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="loginout">退出</el-dropdown-item>
					<el-dropdown-item command="resetPwd">修改密码</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</div>
	</div>
</template>
<script>
	import {
    getUserInfo,
    loginout
	}
  from '@/services/getData'
  import {
    setStore
  }
  from '@/common/mUtils'
	export default {
		data() {
			return {
				username: ''
			}
		},
		mounted() {
			this.initData();
		},
		methods: {
			initData() {
        let userInfo  = sessionStorage._router_userInfo_ ? JSON.parse(sessionStorage._router_userInfo_) : ''
        if (!userInfo || !userInfo.menuResList) {
            this.$message.error('用户身份过期，请重新登录~')
            this.$router.push('/login')
        }
        let userName = userInfo.user.name
        this.username = userName
        sessionStorage.setItem('ms_username', userName)
			},
			getCookie (name){
				var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
				if(arr=document.cookie.match(reg)){
					return unescape(arr[2]);
				}else{
					return null;
				}
			},
			handleCommand(command) {
        switch (command) {
          case 'resetPwd':
            this.$router.push('/resetPwd')
            break;
          case 'loginout':
            loginout().then((res)=>{
              if (res.errorCode === '0000'){
                sessionStorage.removeItem('ms_username')
                localStorage.removeItem('productList')
                localStorage.removeItem('token')
                this.$router.push('/login')
              }else{
                this.$message.error(res.errorDesc)
              }
            })
            break;

          default:
          console.log('啥都没处理~')
          break;
        }
			}
		}
	}
</script>
<style scoped>
	.header {
		position: relative;
		box-sizing: border-box;
		width: 100%;
		height: 70px;
		font-size: 22px;
		line-height: 70px;
		color: #fff;
	}

	.header .logo {
		float: left;
		width: 250px;
		text-align: center;
	}

	.user-info {
		float: right;
		padding-right: 50px;
		font-size: 16px;
		color: #fff;
	}

	.user-info .el-dropdown-link {
		position: relative;
		display: inline-block;
		padding-left: 50px;
		color: #fff;
		cursor: pointer;
		vertical-align: middle;
	}

	.user-info .user-logo {
		position: absolute;
		left: 0;
		top: 15px;
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}

	.el-dropdown-menu__item {
		text-align: center;
	}
</style>
